<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #one {
            box-sizing: border-box;
            width: 100%;
            height: 60px;
            background-color: sandybrown;
            padding-left: 400px;
            padding-right: 400px;
        }

        #box2 {
            width: 100%;
            height: 60px;
            background-color: darkturquoise;
        }

        #box1 {
            width: 400px;
            height: 60px;
            background-color: wheat;
            float: left;
            margin-left: -400px;
        }

        #box3 {
            width: 400px;
            height: 60px;
            background-color: wheat;
            float: right;
            margin-right: -400px;
        }
        #diy1 {
            width: 300px;
            height: 60px;
            background-color: greenyellow;
            float: left;
        }
        #diy2 {
            width: 100%;
            height: 60px;
            background-color: rosybrown;
        }
        #diy3 {
            width: 300px;
            height: 60px;
            background-color: indianred;
            float: right;
        }
        #diy22 {
            box-sizing: border-box;
            width: 100%;
            height: 60px;
            padding-right: 300px;
        }


        #test {
            width: 100%;
            height: 100%;
            background-color: #3388FF;
            overflow: hidden;
        }

        .test1 {
            float: left;
            width: 50px;
            height: 30px;
            background-color: blue;
            margin: 10px;
        }

        .test_border {
            position: absolute;
            width: 200px;
            height: 200px;
            /*border: 1px solid red;*/
            border-width: 1px;
            border-style: solid;
            border-color: red;
            /*border-radius: 53px;*/
            /*border-radius: 50px 50px 50px 50px/10px 10px 10px 10px;*/
            /*border-radius: 20% 20% 20% 20%/10% 10% 10% 10%;*/
            /*border-radius:10px 20px 30px 40px/5px 10px 15px 20px;*/
            margin-left: 200px;
            background-color: #f0c948;
        }

        #pb1 {
            width: 40px;
            height: 40px;
            background-color: #ff1d06;
            /*display: table;*/
            border: 1px solid blue;
        }
        #pb2 {
            width: 80px;
            height: 40px;
            background-color: lime;
            display: inline;
        }



        /*ul,li,a,*{padding:0; margin:0;list-style: none;text-decoration: none;}*/
        ul {
            /*margin:0;*/
            font-size: 0;
        }
        li{display: inline-block;border: thin solid red;}
        li a {
            text-decoration: none;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <div id="one" class="box">
        <div id="box1" >box1</div>
        <div id="box3" >box3</div>
        <div id="box2" >box2</div>
    </div>
    <!--<div id="diy1" >diy1</div>-->
    <!--<div id="diy3" >diy3</div>-->
    <!--<div id="diy22">-->
        <!--<div id="diy2" >diy2diy2</div>-->
    <!--</div>-->
    <div id="test">
        <div class="test1">div1</div>
        <div class="test1">div1</div>
        <div class="test1">div1</div>
        <div class="test1">div1</div>
        <div class="test1">div1</div>
        <div class="test1">div1</div>
        <div class="test1">div1</div>
        <div class="test1">div1</div>
        <div class="test1">div1</div>
    </div>
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
    </ul>
</body>
</html>